<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>平滑式自适应</title>
        <style>
        .container {
            background-color: aqua;
        }
        .content {
            background-color: #bfa;
        }
    </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel
                necessitatibus rem illo perspiciatis molestiae, aliquid
                similique expedita! Soluta vel quisquam voluptas. Delectus
                deserunt vitae ab animi aliquam dolore est illum?
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo
                dignissimos perferendis libero quaerat at labore quos, obcaecati
                officiis veniam, totam neque, temporibus cupiditate illum aut.
                Repellendus numquam omnis neque quaerat?
            </div>
        </div>
        <script>
            window.addEventListener('resize', adjustWidth);
            const adjustWidth = () => {
                var deviceWidth = 
                    document.documentElement.clientWidth > 1300 
                    ? 1300 
                    : document.documentElement.clientWidth;

                document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
            }
        </script>
    </body>
</html>